<template>
  <div class="login-container">
    <div class="main_box">
      <div class="login-box">
          <div class="logo-big">
            <el-image class="logo_image" :src="login_dd" alt="" fit="scale-down"></el-image>
            <p class="name-logo" v-if="websiteName">{{ websiteName }}</p>
            <p class="name-logo" v-else>数字化售后服务系统</p>
          </div>
          <div class="login-form">
            <router-view></router-view>
          </div>
          <footer class="footer_text">
            <a class="url_link" href="https://beian.miit.gov.cn/" rel="noopener" target="_blank">©2024叮咚到家 版权所有
              浙ICP备2022037079号-2</a>
          </footer>
      </div>
      <div class="login-left_img">
        <div class="login_img" :style="{ backgroundImage: `url(${backgroundImage})` }">
          <!-- <div class="text_tip">
            <h3>新一代智能化售后服务<br />管理平台</h3>
            <p>通过一体化客户服务，实现端到端智能化服务运营,<br />提升服务效率，助力企业数字化转型升级，让企业<br />客户服务实现数字化飞跃</p>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import bg1 from '@/assets/login/bg1.jpg'
import bg2 from '@/assets/login/login_bg1.jpg'
import login_dd from '@/assets/login/login_oo.png'
const imgList = ref([bg1, bg2])
const clearTiem = ref(null)
const backgroundImage = ref(bg1)
const prevIndex = ref(0)

const websiteName = ref('')

const changeImg = () => {
  if (prevIndex.value < imgList.value.length - 1) {
    prevIndex.value += 1
  } else if (prevIndex.value == imgList.value.length - 1) {
    prevIndex.value = 0
  }
  backgroundImage.value = imgList.value[prevIndex.value]
}

onMounted(() => {
  clearTiem.value = setInterval(() => {
    changeImg()
  }, 10000)
})
onBeforeUnmount(() => {
  clearInterval(clearTiem.value)
})
</script>

<style lang="scss" scoped>
@import './index';
</style>
